<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .blue {
      color: blue;
    }
  </style>
</head>
<body>

<!--
mvvm 双向数据绑定
mvc
mv
-->





<!--
angular
ng-*

指令
v-bind:title="" 属性 || 简写 :attr=""
v-on:click=""   事件 || 简写 @event=""
v-if=
v-for=
v-model=

v-once
v-html

`${}`
 -->
<div id="app">
  <h1 v-bind:class="titCla">{{msg}}</h1>
  <h1 v-once>这个将不会改变: {{msg}}</h1>
  <button :disabled="isDisabled" @click="changeMsg">change msg</button>
  <button @click="changeAble">switch</button>
  <h1>{{redMsg}}</h1>
  <h1 v-html="redMsg"></h1>
  <a v-bind:[href_name]="'https://www.baidu.com'">baidu</a>
</div>
<script src="vue.js"></script>
<script>
  const app = new Vue({
    data: {
      url: 'https://www.baidu.com',
      href_name: 'href',
      isDisabled: false,
      titCla: 'blue',
      msg: 'Hello Vue',
      redMsg: '<span style="color:red;">Hello Vue</span>'
    },
    methods: {
      changeMsg() {
        this.msg = this.msg.split('').reverse().join('')
      },
      changeAble() {
        this.isDisabled = !this.isDisabled
      }
    }
  }).$mount('#app')
</script>



</body>
</html>